class Page {
  constructor(obj) {
    this.id = obj.id;
    this.getgoods();
  }
  getgoods() {
    $.ajax({
      url: "./json/goods-list.json",
      success: (res) => {
        res = JSON.parse(res);
        let i = 0;
        res.some((val, idx) => {
          i = idx;
          return val.id == this.id;
        });
        this.render(res[i]);
      },
    });
  }
  render(res) {
    let str = "";
    str = `<div class="cont">
      <aside>
          <ul>
              <li class="iii"><img src="${
                res.imgs[0]
              }" alt=""><span></span></li>
              <li class="bigimg"><img src="${res.imgs[0]}" alt=""></li>
              <li class="banner">${this.imgs(res.imgs)}</li>
          </ul>
          <p><a href="">收藏</a><a href="">分享</a></p>
      </aside>
      <header>
          <h1>${res.name}</h1>
          <p>此商品为特惠商品，部分卡券不可使用，详见券面说明。</p>
          <label for="">送至：</label>
          <select name="" id="">
          <option value="">上海</option>
          <option value="">北京</option>
          <option value="">山东</option>
      </select><br>
       购买数量：<input type="number" min=1 value=1 class="baynum"><br>
          <p class="pri">零售价:<span>￥${res.price}</span> </p>
          <button id="add" index=${res.id} pri=${res.price} wei=${
      res.weight
    }>加入购物车</button>
      </header>
  </div>
  <section>
      <aside>

      </aside>
      <article>
          <header>
              <ul>
                  <li><a href="#detailmes">商品详情</a></li>
                  <li><a href="">评论 20</a></li>
                  <li><a href="">食品网购专家</a></li>
              </ul>
          </header>
          <nav>
              <ul>
                  <li>品牌：初萃</li>
                  <li>净含量：${res.weight}kg</li>
                  <li>产地：中国</li>
                  <li>保质期(天)：365</li>
                  <li>商品毛重：5000.0克</li>
              </ul>
              <p>中粮我买网所售商品均经严格的供应商资质审查、商品审查、入库全检、出货全检流程。由于部分商品包装可能会更换，我买网所示商品图片仅作为参考，关于商品的更详尽信息如包装、产地、生产日期等，以收到商品实物为准。</p>
          </nav>
          <div class="detailmes">
              <h1>${res.name}</h1>
              ${this.imgs(res.detailimgs)}
          </div>
          <div class="comment">
              <header><span>商品评价</span></header>
              <ul>
                  <li>14563456346</li>
                  <li>234563466</li>
                  <li>334653465</li>
              </ul>
          </div>
      </article>
  </section>`;
    $("#repo").html(str);
    $("#add").on("click", function () {
      if (document.cookie.split("=")[2] != 2) {
        if (confirm("亲，您还没有登陆，是否去登录？")) {
          location.href = "./login.html";
        } else {
          location.href = "./index.html";
        }
        return;
      }
      let id = $(this).attr("index");
      let price = $(this).attr("pri") - 0;
      let weight = $(this).attr("wei");
      let ops = { id, price, num: 1, weight, flag: 1 };
      const goodsMsg = localStorage.getItem("goodsMsg")
        ? JSON.parse(localStorage.getItem("goodsMsg"))
        : [];
      if (goodsMsg.length < 1) {
        goodsMsg.push(ops);
      } else {
        let i = 0;
        const onoff = goodsMsg.some((val, idx) => {
          i = idx;
          return val.id === ops.id;
        });
        if (onoff) {
          console.log(goodsMsg[i].num, $(".baynum").val());
          if ($(".baynum")) {
            goodsMsg[i].num =
              Number($(".baynum").val()) + Number(goodsMsg[i].num);
            $(".baynum").val(1);
          } else {
            goodsMsg[i].num++;
          }
        } else {
          if ($(".baynum")) {
            ops.num = Number($(".baynum").val());
          }
          goodsMsg.push(ops);
        }
      }
      localStorage.setItem("goodsMsg", JSON.stringify(goodsMsg));
      if (confirm("加购物车成功，继续购物？")) {
        history.back();
      } else {
        location.href = "./shopping_car.html";
      }
      return false;
    });

    new Big({
      sBox: document.querySelector(".iii"),
      sBoximg: document.querySelector(".iii img"),
      bBox: document.querySelector(".bigimg"),
      bBimg: document.querySelector(".bigimg img"),
      sBspan: document.querySelector(".iii span"),
      banner: document.querySelector(".banner"),
    });
  }
  imgs(imgs) {
    let str = "";
    for (var i = 0; i < imgs.length; i++) {
      str += `<img src="${imgs[i]}" alt="">`;
    }
    return str;
  }
}
class Big {
  constructor(ops) {
    this.sBox = ops.sBox;
    this.sBoximg = ops.sBoximg;
    this.sBspan = ops.sBspan;
    this.bBox = ops.bBox;
    this.bBimg = ops.bBimg;
    this.banner = ops.banner;
    this.addEvent();
  }
  addEvent() {
    const that = this;
    this.sBox.onmouseover = function () {
      that.show();
    };
    this.sBox.onmouseout = function () {
      that.hide();
    };
    this.sBox.onmousemove = function (eve) {
      const e = eve || window.event;
      that.move(e);
    };
    this.banner.onclick = function (eve) {
      const e = eve || window.event;
      const target = e.target || EvalError.srcElement || e.toElement;
      if (target.tagName == "IMG") {
        that.sBoximg.setAttribute("src", target.getAttribute("src"));
        that.bBimg.setAttribute("src", target.getAttribute("src"));
      }
    };
  }
  show() {
    this.bBox.style.display = "block";
    this.sBspan.style.display = "block";
    this.sbw = this.sBox.offsetWidth;
    this.sbh = this.sBox.offsetHeight;
    this.bbiw = this.bBimg.offsetWidth;
    this.bbih = this.bBimg.offsetHeight;
    this.bbw = this.bBox.offsetWidth;
    this.bbh = this.bBox.offsetHeight;

    this.sBspan.style.width = this.sbw / (this.bbiw / this.bbw) + "px";
    this.sBspan.style.height = this.sbh / (this.bbih / this.bbh) + "px";
  }
  hide() {
    this.bBox.style.display = "none";
    this.sBspan.style.display = "none";
  }
  move(e) {
    let l = e.pageX - this.sBox.offsetLeft - this.sBspan.offsetWidth / 2 - 40;
    let t = e.pageY - this.sBox.offsetTop - this.sBspan.offsetHeight / 2 - 200;
    if (l < 0) l = 0;
    if (t < 0) t = 0;
    if (l > this.sbw - this.sBspan.offsetWidth) {
      l = this.sbw - this.sBspan.offsetWidth;
    }
    if (t > this.sbh - this.sBspan.offsetHeight) {
      t = this.sbh - this.sBspan.offsetHeight;
    }
    this.sBspan.style.left = l + "px";
    this.sBspan.style.top = t + "px";
    let x = l / (this.sbw - this.sBspan.offsetWidth);
    let y = t / (this.sbh - this.sBspan.offsetHeight);
    this.bBimg.style.left = (this.bbw - this.bbiw) * x + "px";
    this.bBimg.style.top = (this.bbh - this.bbih) * y + "px";
  }
}

new Page({
  id: location.search.split("=")[1],
});
